<template>
    <div>
        <el-form ref="form" :model="form" label-width="100px">
            <el-form-item label="应用类型：">
                <el-select v-model="form.si_application_type" multiple :multiple-limit="3" placeholder="请选择您最擅长的应用类型, 最多可选 3 项" style="width: 100%;">
                    <el-option v-for="item in appOpt" :key="item.st_id" :label="item.st_name" :value="item.st_id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="项目类型：">
                <el-select v-model="form.si_project_type" multiple :multiple-limit="3" placeholder="请选择您擅长的项目类型, 最多可选 3 项" style="width: 100%;">
                    <el-option v-for="item in itemOpt" :key="item.st_id" :label="item.st_name" :value="item.st_id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="开发语言：">
                <el-select v-model="form.si_deve_language" multiple :multiple-limit="3" placeholder="请选择您掌握并熟练使用的开发语言，最多可选 3 项" style="width: 100%;">
                    <el-option v-for="item in langOpt" :key="item.st_id" :label="item.st_name" :value="item.st_id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="开发技能：">
                <el-select v-model="form.si_deve_skill" multiple :multiple-limit="5" placeholder="请选择您最熟练的开发相关技能，最多可选 5 项" style="width: 100%;">
                    <el-option v-for="item in skillOpt" :key="item.st_id" :label="item.st_name" :value="item.st_id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="产品/中间件：">
                <el-select v-model="form.si_product" multiple :multiple-limit="5" placeholder="请选择您最熟练使用与掌握产品中间件，最多可选 5 项" style="width: 100%;">
                    <el-option v-for="item in productOpt" :key="item.st_id" :label="item.st_name" :value="item.st_id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="可担任岗位：">
                <el-select v-model="form.si_post" multiple :multiple-limit="3" placeholder="请选择最适合您的工作岗位，最多可选 3 项" style="width: 100%;">
                    <el-option v-for="item in postOpt" :key="item.st_id" :label="item.st_name" :value="item.st_id">
                    </el-option>
                </el-select>
            </el-form-item>
            <div class="text-center" style="padding-bottom: 50px;">
                <el-button type="primary" @click="onSubmit('form')" class="btn_200">保存</el-button>
                <router-link to="/skill/skillinfo"><el-button class="btn_200">取消</el-button></router-link>
            </div>
        </el-form>
    </div>
</template>
<script>

    export default {
        data(){
            return{
                infoData: {},
                form: {
                    'si_application_type': [],
                    'si_project_type': [],
                    'si_deve_language': [],
                    'si_deve_skill': [],
                    'si_product': [],
                    'si_post': [],
                },
                appOpt: [],
                itemOpt: [],
                langOpt: [],
                skillOpt: [],
                productOpt: [],
                postOpt: [],
            }
        },
        methods: {
            init(){

                this.selectOpt(1);  //应用类型
                this.selectOpt(2);  //项目类型
                this.selectOpt(3);  //开发语言
                this.selectOpt(4);  //开发技能
                this.selectOpt(5);  //产品/中间件
                this.selectOpt(6);  //可担任岗位

                var _this = this;
                //技能信息详情   初始值
                this.$httpGet('/api/index/Personal_center/getSkillType',{
                    'u_id': window.localStorage.uid,
                }).then(response => {
                    
                    if(response.code == 200){

                        _this.infoData = response.msg;
                        if(response.msg.si_application_type){
                            _this.form.si_application_type = response.msg.si_application_type.split(',');
                            _this.form.si_application_type = _this.strTonum(_this.form.si_application_type);
                        }
                        if(response.msg.si_project_type){
                            _this.form.si_project_type = response.msg.si_project_type.split(',');
                            _this.form.si_project_type = _this.strTonum(_this.form.si_project_type);
                        }
                        if(response.msg.si_deve_language){
                            _this.form.si_deve_language = response.msg.si_deve_language.split(',');
                            _this.form.si_deve_language = _this.strTonum(_this.form.si_deve_language);
                        }
                        if(response.msg.si_deve_skill){
                            _this.form.si_deve_skill = response.msg.si_deve_skill.split(',');
                            _this.form.si_deve_skill = _this.strTonum(_this.form.si_deve_skill);
                        }
                        if(response.msg.si_product){
                            _this.form.si_product = response.msg.si_product.split(',');
                            _this.form.si_product = _this.strTonum(_this.form.si_product);
                        }
                        if(response.msg.si_post){
                            _this.form.si_post = response.msg.si_post.split(',');
                            _this.form.si_post = _this.strTonum(_this.form.si_post);
                        }
                        
                        
                    }else if(response.code == 300){
                        
                    }else{
                        this.$message({
                            message: response.msg,
                            type: 'warning'
                        });
                    }

                });
            },
            //字符串数组转换为数字数组
            strTonum(arr){
                var numarr = [];
                arr.map(function(data){ 
                    numarr.push(parseInt(data));
                });
                return numarr;
            },
            //提交表单
            onSubmit(formName){
                var _this = this;
                        
                let data = {};
                data.si_id = _this.$route.query.sid;
                data.si_uid = window.localStorage.uid;
                data.si_application_type = _this.form.si_application_type.join();
                data.si_project_type = _this.form.si_project_type.join();
                data.si_deve_language = _this.form.si_deve_language.join();
                data.si_deve_skill = _this.form.si_deve_skill.join();
                data.si_product = _this.form.si_product.join();
                data.si_post = _this.form.si_post.join();
                console.log(data);
                this.$httpPost('/api/index/Personal_center/addOrUpdateSkillData',data).then(response => {

                    if(response.code == 200){
                        
                        this.$message({
                            message: response.msg,
                            type: 'success'
                        });
                        setTimeout(() => {
                            _this.$router.push({
                                path: '/skill/skillinfo'
                            })
                        }, 2000);
                        
                    }else{
                        this.$message({
                            message: response.msg,
                            type: 'warning'
                        });
                    }

                });

            },
            //下拉
            selectOpt(type){
                var _this = this;
                // 获取下拉
                this.$httpGet('/api/index/Skilltype/getSkillForStatus',{'st_type': type}).then(response => {

                    if(response.code == 200){

                        if(type == 1){  //应用类型
                            _this.appOpt = response.msg;
                        }else if(type == 2){  //项目类型
                            _this.itemOpt = response.msg;
                        }else if(type == 3){  //开发语言
                            _this.langOpt = response.msg;
                        }else if(type == 4){  //开发技能
                            _this.skillOpt = response.msg;
                        }else if(type == 5){  //产品/中间件
                            _this.productOpt = response.msg;
                        }else if(type == 6){  //可担任岗位
                            _this.postOpt = response.msg;
                        }
                    }

                });
            },
        },
        mounted(){
            this.init();
        },
    }
</script>
